<template>
  <div class="kanbanWrap">
    <div class="kanban clearfix">
      <p class="kanban-p">空闲中</p>
      <div class="kanban-div">
        <p v-for="(item,index) of safe" :key="index" :class="item.groupId==current?'acitveP':''" @click="saleHandle(item)">{{item.groupName}}</p>
      </div>
    </div>
    <Kanban v-if="dataListArr?true:false" res="kanban" :dataList="dataListArr" @showModel="showModel"/>
      <BaseDialog
      :visible.sync="visible"
      :title="dialogTitle"
      :cols="1"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <modal :type="handleType" :rowData="formData" @close="closeHandler" />
    </BaseDialog>
  </div>
</template>
<script>
// 获取用户信息
import { dictionary } from '@/utils/dictMixin';
import Kanban from './Kanban';
import modal from '../exhibition/modal'
// import { queryReceptionistInfo, qryMembersByGroupId, updWorkStatu } from '@/api/potenCus/customer/exhibitionPanel'
import { exportExcelFile } from '@/utils/index';
import { authority } from '@/utils/authMixin';
import moment from 'moment'
export default {
  name: 'quotedprice',
  components: {
    Kanban,
    modal
  },
  mixins: [dictionary,authority],
  data() {
    return {
      safe: [],
      current: '',
      visible: false,
      // dataListArr: [],
      dataListArr:[
        {
          id: '1',
          name: '张三',
          imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          num: 10,
          time: '00:00:00'
        },
        {
          id: '2',
          name: '李四',
          imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          num: 20,
          time: '00:00:00'
        },
        {
          id: '3',
          name: '刘德华',
          imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          num: 50,
          time: '00:00:00'
        },
        {
          id: '4',
          name: '周润发',
          imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          num: 60,
          time: '00:00:00'
        }
      ],
      formData: {},
      handleType: 'add',
      dialogTitle: '新增客流登记'
    };
  },
  mounted() {
    // this.init()
  },
  methods: {
    async init(){
      this.saleListInfo()
    },
    saleListInfo() {
      let params = { flag: 1 }
      queryReceptionistInfo(params).then(res => {
        if (res.success) {
          this.safe = res.data
          this.saleHandle(this.safe[0])
        }
      })
    },
    saleHandle(obj){
      // this.$refs.kankan.beforeDestroy();
      this.current = obj.groupId;
      this.qryMembers();
    },
    // 查询组成员
    qryMembers() {
      let params = { groupId: this.current }
      // qryMembersByGroupId(params).then(res => {
      //   if (res.success) {
      //     this.dataListArr = this.mappingList(res.data)
      //   }
      // });
    },
    mappingList(list) {
      let { preDateHandler } = this
      let newList =  Array.isArray(list) && list.length > 0 ? list.map(item => {
        return {
          id: item.id.toString(),
          name: item.employeeName,
          imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          workStatus: item.workStatus,
          time: preDateHandler(item.startTime)
        }
      }) : [];
      return newList;
    },
    showModel() {
      console.log('分配任务')
      this.visible = true
    },
    closeHandler(val) {
      this.visible = false
      if (val !== 'refresh') {
        this.$ref.kanban.DEFEATWORKWORKSTATUS()
      }
    },
    /*
    * 日期预处理
    * @val: string, value:$date-time
    * @formatCode: string, value: 'YYYY-MM-DD HH:mm:ss'
    * @return: string, value:'YYYY-MM-DD HH:mm:ss'
    */
    preDateHandler(val, formatCode = 'YYYY-MM-DD HH:mm:ss') {
      let resultDate = val ? moment(Number(val)).format(formatCode) : val;
      if ((resultDate == 'Invalid date' || resultDate == 'Invalid Date') && val) {
        resultDate = moment(val).format(formatCode);
      }
      return resultDate;
    },
  }

};
</script>

<style lang="less" scoped>
.kanbanWrap{
  .kanban{
    height: 50px;
    line-height: 50px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    .kanban-p{
      font-size: 22px;
      float: left;
      margin-left: 20px;
    }
    .kanban-div{
      font-size: 18px;
      font-weight: 900;
      float: right;
      p{
        float: left;
        width: 88px;
        height: 30px;
        line-height: 30px;
        border: 1px solid cornflowerblue;
        text-align: center;
        border-radius: 8px;
        margin: 10px 5px 0 0;
        cursor: pointer;
      }
      .acitveP{
        background: #189CDD;
      }
    }
  }
}
</style>
